<template>
    <div style="width:390px;height:844px;">
        <div style="display:flex;margin-bottom:20px;margin-top:30px;width:360px;margin-left:15px;">
            <p style="margin-top:15px;"><el-icon @click="onClickLeft"><ArrowLeft /></el-icon></p>
            <div style="margin-left:30px;">
                <van-search
                    v-model="searchKeyword"
                    show-action
                    placeholder="请输入搜索关键词"
                    
                    >
  <template #action>
    <div style="width:50px;height:30px;border-radius:15px;text-align:center;line-height:30px;background-color:#f57c00;color:white;" @click="throttledOnSearch">搜索</div>
  </template>
</van-search>
            </div>
        </div>
        <div style="width:360px;margin-left:15px;height:120px;">
            <div>
                <p style="font-size:13px;font-weight:700;margin-bottom:20px;">
                    历史搜索
                    <span style="margin-left:260px;"><el-icon @click="clearHistory"><Delete /></el-icon></span>
                </p>
                <div style="display:flex;">
                <div v-for="(historyItem, index) in searchHistory" :key="index" @click="router.push('/zheng')" style="display:inline block;width:80px;height:30px;background-color:#f7f7f7;font-size:14px;text-align:center;line-height:30px; margin-right: 10px;">
                    {{ historyItem }}
                </div>
            </div>
            </div>

        </div>
        <div style="width:360px;margin-left:15px;">
            <h5 style="margin-bottom:20px;">猜你需要</h5>
            <div style="display:flex;height:80px;flex-wrap: wrap;justify-content: space-around;align-content:space-between">
                <div v-for="i in cai" :key="i.id" @click="router.push('/zheng')" style="width:80px;text-align:center;height:30px;line-height:30px;border-radius:8px;background-color:#f7f7f7;font-size:14px;">
                    {{ i.name }}
                </div>
            </div>
        </div>
    </div>
  </template>
  
  <script setup lang="ts">
import {ref,computed, onMounted} from 'vue'
import axios from 'axios'
import {useRouter,useRoute} from 'vue-router'
//封装节流函数
const throttle = (fn:Function,delay:number)=>{
    let timer:ReturnType<typeof setTimeout> | null = null
    return (...args:any[])=>{
        if(!timer){
            fn(...args)
            timer = setTimeout(()=>{
                timer = null
            },delay)
        }
    }
}
const route=useRoute()
const router=useRouter()
const cai=ref([
    {id:1,name:'岗夏村'},
    {id:2,name:'创业花园'},
    {id:3,name:'横岭村'},
    {id:4,name:'富联新村'},
    {id:5,name:'民治小学'},
    {id:6,name:'龙光玖钻'},
    {id:7,name:'赖屋山新村'},
    {id:8,name:'梅龙天桥'},
    
])
const onClickLeft = () => history.back()
const searchKeyword = ref('');
const searchHistory = ref<string[]>(JSON.parse(localStorage.getItem('searchHistory') || '[]'));
    const onSearch = () => {
    if (searchKeyword.value) {
        // 将搜索关键字添加到历史搜索中
        if (!searchHistory.value.includes(searchKeyword.value)) {
            searchHistory.value.push(searchKeyword.value);
            localStorage.setItem('searchHistory', JSON.stringify(searchHistory.value));
        }
        // 跳转到搜索结果页面，并传递关键字
        router.push({ path:'/zheng', query: { keyword: searchKeyword.value } });
    }
};
//使用节流函数包裹onSearch
const throttledOnSearch = throttle(onSearch,1000)//设置节流时间为1000ms
//清除历史记录
const clearHistory = () => {
    searchHistory.value = [];
    // localStorage.setItem('searchHistory', JSON.stringify(searchHistory.value));
    localStorage.removeItem('searchHistory')
};
  </script>
  
  <style>
  
  </style>